<template>
  <div class="play-list">
    <el-table :data="tableData" height="100%" @row-dblclick="play">
      <el-table-column width="22" prop="index">
         <template slot-scope="scope">
          <i class="el-icon-caret-right" v-if="scope.row.index === currentPlayingIndex && !playState"></i>
          <i class="el-icon-caret-top" v-if="scope.row.index === currentPlayingIndex && playState"></i>
        </template>
      </el-table-column>
      <el-table-column
        width="230"
        :render-header="customHeader"
        prop="name"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{scope.row.name}} 
        </template>
      </el-table-column>
      <el-table-column width="80" prop="artist" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column width="40">
        <template slot-scope="">
          <i class="el-icon-link"></i>
        </template>
      </el-table-column>
      <el-table-column width="60" prop="time" :fit="true"></el-table-column>
    </el-table>
  </div>
</template>
<script>
import moment from 'moment'
import { playMusic } from 'mixin/global/play-music'
export default {
  name: "playList",
  mixins: [playMusic],
  props: {
    musicList: {
      type: Array,
      default: () => [],
    },
    currentPlayingIndex: {
      type: Number,
      default: 0
    },
    /**
     * false :  正在播放  true: 暂停播放
     */
    playState: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  computed: {
    tableData() {
      console.log(this.musicList);
      if(this.musicList && this.musicList.length > 0) {
          let musicListFilter = []
          this.musicList.map((music,index) => {
              let dataInfo = {
                  'index': index,
                  'id': music.id,
                  'name': music.name,
                  'artist': music.artist,
                  'time': moment(new Date(music.song.duration)).format('mm:ss'),
              }
              musicListFilter.push(dataInfo)
          })
          return musicListFilter
      }  else {
          return []
      }
    },
  },
  mounted() {
    
  },
  methods: {
    moment,
    customHeader(h, { column, $index }) {
      return (
        <div>
          <span> 总{this.musicList.length}首</span>
        </div>
      );
    },
    play(row) {
        console.log(row);
        const { id , index} = row
        this.$emit('changeCurrentMusic',index,id)
    }
  },
};
</script>
<style lang="less" scoped>
.play-list {
  width: 28rem;
  height: calc(100vh - 70px - 58px);
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 58px;
  right: 0;
  box-shadow: -1px 0 1px rgb(185, 181, 181);
}
</style>